<template>
	<view class="wrapper">
		<u-navbar :title="$t('user.Favorites')" :autoBack="true" bgColor="#F6F6F6"
			titleStyle="font-weight: 500; color: #000000;" :placeholder="true">
		</u-navbar>
		<view class="text-container" :style="`height: calc(${WindowInfo.windowHeight}px - 44px - 60rpx)`">
			<view class="text-header">
				<view> {{ moment(msgInfo.sendTime).format('YYYY/MM/DD') }} </view>
				<view>{{$t('index.From')}}	{{msgInfo.sendName}}</view>
			</view>
			<view class="text-content" :style="`height: calc(${WindowInfo.windowHeight}px - 44px - 170rpx)`" v-if="!msgInfo.context.mediaExpansion" v-html="setLinkTextOpenToHtml(msgInfo.context.content)">
			</view>
			<view class="text-content" :style="`height: calc(${WindowInfo.windowHeight}px - 44px - 170rpx)`" v-else v-html="setLinkTextOpenToHtml(msgInfo.context.mediaExpansion)">
			</view>
		</view>
	</view>
</template>

<script>
	import moment from "moment";
	export default {
		name: "TextDetail",
		data() {
			return {
				msgInfo: '',
				WindowInfo: ''
			}
		},
		onLoad(option) {
			const that = this
			setTimeout(() => {
				that.WindowInfo = uni.getWindowInfo()
			}, 10)
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('TextDetail', function({
				data
			}) {
				that.msgInfo = data
			})
		},
		methods: {
			moment
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .a-link {
		font-size: 28upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #1765DA;
		text-decoration: none;
	}
	.wrapper {

		box-sizing: border-box;
		padding: 0 30rpx;

		.text-container {
			background: #FFFFFF;
			border-radius: 20px;
			overflow: hidden;
			padding: 0 30rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #000000;
			line-height: 44rpx;
			box-sizing: border-box;

			.text-header {
				height: 110rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #878787;
				
				&>view:first-child {
					margin-right: 11rpx;
				}
				&>view:last-child {
					margin-left: 11rpx;
				}
			}

			.text-content {
				overflow: auto;
				padding-bottom: 20rpx;
				box-sizing: border-box;
				word-wrap: break-word;
			}
		}
	}
</style>